<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Access-Control-Allow-Origin" content="*" />
		<title>一城一盒</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@beta/lib/index.css">
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@beta/lib/vant.min.js"></script>
		<script type="application/javascript" src="../js/flexible.debug.js"></script>
		<script type="application/javascript" src="../js/flexible_css.debug.js"></script>
		<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
		<script type="text/javascript" src="../js/querystring.min.js"></script>
		<script type="text/javascript" src="../js/cfg.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<link rel="stylesheet" href="../css/layout.css">
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="top">
				<div class="swiper width100 height622 backgroundcoloreae8f6">
					<van-swipe :autoplay="3000" class="width100 height622">
						<van-swipe-item v-for="(image, index) in images" :key="index">
							<img v-lazy="image" :src="image" />
						</van-swipe-item>
					</van-swipe>
				</div>
				<div class="content productDes backgroundcolorfff">
					<div class="displayFlex">
						<p class=" fontBold left flex1"><em class="colorff0000 font30 fontBold">¥</em><span class="font42 colorff0000">{{cost.og_present_price}}<em
								 class="colorff0000 font30 fontBold">.00</em></span><span class="color333 mg-l20"><s class="font28">原价<em class="fontBold">¥{{cost.og_original_price}}</em></s></span></p>
						<p class="right flex1 kuaidi"><img src="../img/kuaidi.png" alt="快递" class="width114 height30"></p>
					</div>
					<div class="height96 font28 color333 lineHeight40 displayFlex">
						<p class="width90p">最具重庆特色礼盒，包括茶、饮、食、佐、料、小吃、火锅、餐具等，味道棒极了，保证让你回味无穷。</p>
						<p class="share width10p">
							<span class="width48 height48 displayInline"><img class="width100p height100p" src="../img/iconshare.png" alt="分享"></span>
							<span class="font24">分享</span>
						</p>
					</div>
				</div>
			</div>
			<div class="midell mg-t20 tabnav">
				<div class="content backgroundcolorfff">
					<div class="tabTitle colorb1b1b1">
						<div class="navTitle displayFlex backgroundcolorfff" :class="searchBarFixed == true ? 'isFixed' :''">
							<p @click="tab(0)" :class="{active:cur==0}" class="height88 lineHeight88 font30 colorb1b1b1 textCenter flex1">产品介绍</p>
							<p @click="tab(1)" :class="{active:cur==1}" class="height88 lineHeight88 font30 colorb1b1b1 textCenter flex1">产品规格</p>
							<p @click="tab(2)" :class="{active:cur==2}" class="height88 lineHeight88 font30 colorb1b1b1 textCenter flex1">拼团流程</p>
						</div>
						<div class="tab-content mg-t30 pd-b80">
							<div v-show="cur==0">
								<div class="detailTop width100 height1169"></div>
								<div class="cqjy width100 height982"></div>
								<p class="displayTable font26 color979797">点击圆点，去重庆逛逛</p>
								<div class="hgcq width100 height1514"></div>
								<div class="rishi width100 height614"></div>
								<p class="color2970ff font-28 mg-l64">去尝尝小面></p>
								<div class="chadian mg-t112"></div>
								<div class="zuojiu mg-t110"></div>
								<div class="detailBottom width100 height2617 mg-t52"></div>
							</div>
							<div v-show="cur==1">
								<div class="colorb1b1b1 bordertopf0">
									<p class="color909090 font26 lineHeight78 borderbottomf0 pad-lr24">产品属性</p>
									<p class="color909090 font26 lineHeight78 borderbottomf0 pad-lr24">产品名称：一城一盒</p>
									<p class="color909090 font26 lineHeight78 borderbottomf0 pad-lr24">礼盒尺寸：300mmX190mmX450mm</p>
									<p class="color909090 font26 lineHeight78 borderbottomf0 pad-lr24">保质期：12个月</p>
									<p class="color909090 font26 lineHeight78 borderbottomf0 pad-lr24">内包装袋：9袋</p>
									<p class="color909090 font26 lineHeight78 borderbottomf0 pad-lr24">礼盒毛重：1.05kg</p>
									<p class="color909090 font26 lineHeight78 borderbottomf0 pad-lr24">礼包明细：陈麻花100g、芝麻杆100g、张飞牛肉100g、火锅底料200g、筷子1双、油底*2</p>
								</div>
							</div>
							<div v-show="cur==2">
								<div class="colorb1b1b1">
									<p class="color909090 font26 lineHeight44 pad-lr24">1. 选择发起团购</p>
									<p class="color909090 font26 lineHeight44 pad-lr24">2. 填写收货地址，选择购买数量和支付方式；</p>
									<p class="color909090 font26 lineHeight44 pad-lr24">3.
										支付完成后，可通过立即邀请团友，将分享页通过微信发送给好友，或者，关注微信公众号，通过个人中心>邀请团友发送分享页给好友。</p>
									<p class="color909090 font26 lineHeight44 pad-lr24">4. 若有2个及以上好友通过您分享的链接下单，即拼团成功，卖家会即时发货。</p>
									<p class="color909090 font26 lineHeight44 pad-lr24">5. 关注微信公众号，可在个人中心查看订单详情。</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class=" displayFlex width100 bottom">
				<div v-if="orderNo==''">
					<p class="displayFlex width100 mg-t20">
						<span class="backgroundcolor50 colorfff font30 width50 textCenter height82 lineheight82" @click="goLink('buy.html?orderType=0'+'&parent_order_no='+orderNo)">¥{{cost.og_present_price}}
							单独购买</span>
						<span class="backgroundcolorf72929 colorfff font30 width50 textCenter height82 lineheight82" @click="goLink('buy.html?orderType=1'+'&parent_order_no='+orderNo)">¥{{cost.og_assemble_price}}
							发起团购</span>
					</p>
				</div>
				<div v-else-if="orderNo!=''">
					<p class="backgroundcolorf72929 colorfff font30 textCenter width100 height82 lineheight82" v-show="!assembleIsFull"
					 @click="goLink('buy.html?orderType=1'+'&parent_order_no='+orderNo)">¥268
						参与团购</p>
					<div v-show="assembleIsFull">
						<p class="font24 colorf72929 textCenter width100">本次拼团活动已结束，您可重新发起拼团</p>
						<p class="displayFlex width100 mg-t20">
							<span class="backgroundcolor50 colorfff font30 width50 textCenter height82 lineheight82" @click="goLink('buy.html?orderType=0'+'&parent_order_no='+orderNo)">¥{{cost.og_present_price}}
								单独购买</span>
							<span class="backgroundcolorf72929 colorfff font30 width50 textCenter height82 lineheight82" @click="goLink('buy.html?orderType=1'+'&parent_order_no='+orderNo)">¥{{cost.og_assemble_price}}
								发起团购</span>
						</p>
					</div>
				</div>
			</div>
			<div class="sideBar">
				<a :href="'tel:' + '10086'"><img src="../img/phone.png" alt="客服电话"></a>
				<p class="mg-t30"><img src="../img/weixin.png" alt="咨询客服"></p>
			</div>
		</div>
		<script>
			var textType="0";
			var cfg = new AppCfg().init({
				isDebug: false,
			});
			var qsd = querystring.parse();
			var vant = window.vant;
			Vue.use(vant);
			new Vue({
				el: '#app',
				data: {
					cur: 0,
					images: [
						'../img/2.jpg',
						'../img/2.jpg'
					],
					searchBarFixed: false,
					cost: '',
					assembleIsFull: true,
					orderNo:(qsd&&qsd.parent_order_no)?qsd.parent_order_no:'',
					parentId:(qsd&&qsd.user_parent_id)?qsd.user_parent_id:'',
					urlType:(qsd&&qsd.url_type)?qsd.url_type:''
				},
				created: function() {
					this.setPrice();
					this.checkorderType();
				},
				methods: {
					// 价格设置
					setPrice: function() {
						var that = this;
						cfg.majaxAction("queryOriginaDetail", '', function(res) { //价格设置
						// console.log(res)
								if(res.data){
									that.cost = res.data;
								}
						});
					},
					// 检测拼团情况
					checkorderType: function() {
						var that = this;
						var parm = {
							order_no:that.orderNo,
							user_parent_id:that.parentId,
							url_type:that.urlType
						}
						cfg.majaxAction("queryAssembleIsFull", parm, function(res) { //价格设置
							if (res.data) {
								that.assembleIsFull = res.data.assembleIsFull //true拼团已满提示语,false平图案未满直接拼团购
							}
						});
					},
					onClickButton() {
						vant.Toast('点击按钮');
					},
					tab: function(e) {
						this.cur = e;
						this.cur != 0 ? this.searchBarFixed = "false" : this.searchBarFixed = "true"
					},
					handleScroll() {
						var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
						var offsetTop = document.querySelector('.navTitle').offsetTop;
						scrollTop > offsetTop ? this.searchBarFixed = true : this.searchBarFixed = false
						// console.log(scrollTop)
					},
					goLink: function(val) {
						window.location.href = val;
					},
				},
				mounted: function() {
					window.addEventListener('scroll', this.handleScroll);
					// this.wxconfig();
				},
				destroyed: function() {
					window.removeEventListener('scroll', this.handleScroll)
				}
			})
		</script>
		<script type="text/javascript" src="../js/h5Share.js"></script>
	</body>
</html>
